<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="工单信息" name="1">
        <FormPanel ref="formpanel" :list="formList" formType="add" labelWidth="100" :isSubmitBtn="false" :rows="4" @formChange="formchangeFun" />
      </el-collapse-item>
    </el-collapse>
    <el-tabs v-model="tabName" @tab-click="handleClick">
      <el-tab-pane label="维修项目" name="first"></el-tab-pane>
      <el-tab-pane label="维修材料" name="second"></el-tab-pane>
      <el-tab-pane label="销售材料" name="third"></el-tab-pane>
      <el-tab-pane label="附加项目" name="fourth"></el-tab-pane>
    </el-tabs>
    <oemSettlementTables :type="tabName" :getdata="getdata" @close="closepop"></oemSettlementTables>
    <el-collapse v-model="activeNameNews">
      <el-collapse-item title="结算单信息" name="1">
        <FormPanel ref="formpanel" :list="SettlementList" formType="add" labelWidth="100" :isSubmitBtn="false" :rows="4" @formChange="formchangesFun" />
      </el-collapse-item>
    </el-collapse>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer(3)">取消</el-button>
    </div>
    <div>
      <BaseDialog :visible.sync="tableVisible" title="明细" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"></BaseDialog>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import oemSettlementTables from './oemSettlementTables.vue';
import { getoemQueryComplaint, getoemaccountOEMdetail, getoemmaintainMaterialOEM } from '@/api/repair/business/customer/history';
export default {
  name: 'zjOemsettlement',
  components: {
    oemSettlementTables
  },
  props: ['getdata'],
  data() {
    return {
      activeNames: '1',
      activeNameNews: '1',
      tabName: 'first',
      formList: this.createFrom(),
      SettlementList: this.createFroms(),
      tableVisible: false,
      fetchParams: {
        sort: 'RO_NO',
        order: 'asc',
        limit: '5',
        offset: '0',
        maintain_project: '',
        dmsFuncId: '35100010',
        _: '1565592518074',
        RO_NO: this.getdata.RO_NO,
        ASC_SHORTNAME: this.getdata.ASC_SHORTNAME,
        DEALER_CODE: this.getdata.DEALER_CODE
      },
      detailParams: {
        dmsFuncId: '35100010',
        _: '1565592518161',
        RO_NO: this.getdata.RO_NO,
        ASC_SHORTNAME: this.getdata.ASC_SHORTNAME,
        DEALER_CODE: this.getdata.DEALER_CODE
      },
      detaildata: {}
    };
  },
  created() {
    this.getdetail();
  },
  methods: {
    createFrom() {
      return [
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'RO_NO',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'LICENSE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'VIN',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '发动机号',
          fieldName: 'ENGINE_NO',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '工单类型',
          fieldName: 'RO_TYPE',
          itemList: [{ text: '1', value: '1' }],
          disabled: true
        },
        {
          type: 'SELECT',
          label: '维修类型',
          fieldName: 'REPAIR_TYPE_CODE',
          itemList: [{ text: '1', value: '1' }],
          disabled: true
        },
        {
          type: 'INPUT',
          label: '服务工程师',
          fieldName: 'IN_MILEAGE',
          disabled: true
        },
        {
          type: 'DATE',
          label: '开单日期',
          fieldName: 'RO_CREATE_DATE',
          valueFormat: 'YY-MM-DD',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '进厂里程',
          fieldName: 'IN_MILEAGE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '出厂里程',
          fieldName: 'OUT_MILEAGE',
          disabled: true
        },
        {
          type: 'DATE',
          label: '上牌日期',
          fieldName: 'LICENSE_DATE',
          valueFormat: 'YY-MM-DD',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '送修人姓名',
          fieldName: 'IN_MILEAGE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '送修人电话',
          fieldName: 'DELIVERER',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '送修人手机',
          fieldName: 'DELIVERER_MOBILE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '估价单号',
          fieldName: 'ESTIMATE_NO',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'OWNER_NAME',
          disabled: true
        },
        {
          type: 'DATE',
          label: '预交车时间',
          fieldName: 'END_TIME_SUPPOSED',
          valueFormat: 'YY-MM-DD',
          disabled: true
        },
        {
          type: 'TEXT_AREA',
          label: '检查结果',
          fieldName: 'CUSTOMER_DESC',
          disabled: true
        },
        {
          type: 'TEXT_AREA',
          label: '送修问题',
          fieldName: 'RO_TROUBLE_DESC',
          disabled: true
        }
      ];
    },
    formchangeFun(val) {},
    closepop(val) {
      this.tableVisible = false;
    },
    handleClick(val) {
      console.log(val, '21');
    },
    createFroms() {
      return [
        {
          type: 'INPUT',
          label: '结算单号',
          fieldName: 'BALANCE_NO',
          disabled: true
        },
        {
          type: 'DATE',
          label: '结算时间',
          fieldName: 'BALANCE_TIME',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '优惠模式',
          fieldName: 'DISCOUNT_MODE_CODE',
          placeholder: '请选择',
          itemList: [{ text: 1, value: 1 }],
          disabled: true
        },
        {
          type: 'SELECT',
          label: '结算员',
          fieldName: 'BALANCE_HANDLER',
          placeholder: '请选择',
          itemList: [{ text: 1, value: 1 }],
          disabled: true
        },
        {
          type: 'INPUT',
          label: '原结算单号',
          fieldName: 'LAST_BALANCE_NO',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '发票编号',
          fieldName: 'INVOICE_NO',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '发票类型',
          fieldName: 'INVOICE_TYPE_CODE',
          placeholder: '请选择',
          itemList: [{ text: 1, value: 1 }],
          disabled: true
        },
        {
          type: 'SELECT',
          label: '支付方式',
          fieldName: 'PAY_TYPE_NAME',
          placeholder: '请选择',
          itemList: [{ text: 1, value: 1 }],
          disabled: true
        },
        {
          type: 'INPUT',
          label: '合同号',
          fieldName: 'CONTRACT_NO',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '合同证书',
          fieldName: 'CONTRACT_CARD',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '电子账户ID',
          fieldName: 'CARD_ID',
          disabled: true
        }
      ];
    },
    formchangesFun(val) {},
    async getdetail() {
      let that = this;
      let res = await getoemaccountOEMdetail(this.detailParams);
      res.END_TIME_SUPPOSED = moment(res.END_TIME_SUPPOSED).format('YYYY-MM-DD');
      res.LICENSE_DATE = moment(res.LICENSE_DATE).format('YYYY-MM-DD');
      res.RO_CREATE_DATE = moment(res.RO_CREATE_DATE).format('YYYY-MM-DD');
      res.BALANCE_TIME = moment(res.BALANCE_TIME).format('YYYY-MM-DD');
      console.log(this.getdata, 'getdata');
      that.formList.forEach(x => {
        x.initialValue = res[x.fieldName];
      });
      that.SettlementList.forEach(x => {
        x.initialValue = res[x.fieldName];
      });
    },
    closeDrawer(type) {
      this.$emit('close', false);
    }
  }
};
</script>
